<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ _.get($store.state.user.userInfo, 'base.username') }}</div>

    <HeHe />

    <PageTools>
      <template #before>heheda</template>
      <template #after>
        <el-button>呵呵1</el-button>
        <el-button>呵呵2</el-button>
      </template>
    </PageTools>

    <UploadExcel />

    <ImageUpload v-model="images" :limit="3" @success="onSuccess" />

    <hr />

    <DggImageUpload v-model="avatar" :limit="3" />

    <hr />

    <img src="http://hehe.jpg" v-imgerr="'http://xixi.jpg'" alt="" />
    <!-- img.src 会自动添加最后那个 /  ==> http://hehe.jpg 会变成  http://hehe.jpg/ -->
    <!-- <img src="http://hehe.jpg" alt="" id="img" /> -->
  </div>
</template>

<script>
import HeHe from '@/components/HeHe';
// import PageTools from '@/components/PageTools';
export default {
  name: 'Dashboard',
  components: {
    HeHe,
    // PageTools,
  },
  data() {
    return {
      images: ['https://shuiruohanyu.gitee.io/yyds/document/assets/img/image-20200806174643390.94bf73b1.png'],
      // 假设这个就是读取到的员工的头像
      avatar: 'https://shuiruohanyu.gitee.io/yyds/document/assets/img/image-20200806174643390.94bf73b1.png',
    };
  },
  // 进入前
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter');
    next();
  },
  // 更新前
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate', this.$route); // 目前 this.$route 中是更新前的值
    next();
  },
  // 离开前
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave');
    next();
  },
  watch: {
    // $route 并非当前组件自定义的 data，而是 VueRouter 这个官方插件 混入（mixin） 到 组件内的
    '$route.query.id'(newValue, oldValue) {
      console.log(newValue, 'newValue');
      console.log(oldValue, 'oldValue');
    },
  },
  methods: {
    onSuccess(obj) {
      console.log('[ obj ]-54', obj);
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
